<template>
  <div id="app">
    <template v-if="showHeader">
      <HeaderNav :seller="seller"></HeaderNav>
      <div class="tab border-1px">
        <div class="tab-item">
          <router-link to="/goods">商品</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/ratings">评论</router-link>
        </div>
        <div class="tab-item">
          <router-link to="/seller">商家</router-link>
        </div>
      </div>
    </template>
    <router-view :seller="seller" :showHeader="showHeader" :rating="rating"></router-view>
  </div>
</template>

<script>
import { urlParse } from "./assets/js/util";
import HeaderNav from "./components/Header";
const ERR_OK = 0;
export default {
  name: "app",
  data() {
    return {
      seller: {
        id: (() => {
          let queryParam = urlParse();
          return queryParam.id;
        })()
      },
      rating: [],
      showHeader: true
    };
  },
  methods: {
    changeHash() {
      const hash = window.location.hash;
      if (hash.indexOf("payment") > -1 || hash.indexOf("order") > -1) {
        this.showHeader = false;
      } else {
        this.showHeader = true;
      }
    }
  },
  created() {
    this.changeHash();
    window.addEventListener("hashchange", () => {
      this.changeHash();
    });
    this.$http
      .get(
        "./src/static/data.json"
      )
      .then(res => {
        this.seller =res.data.seller;
        this.rating = res.data.ratings;
      })
      .catch(err => {
        console.error(err);
      });
  },
  components: {
     HeaderNav
  }
};
</script>

<style lang="scss">
@import './assets/css/mixin.scss';
.tab {
  display: flex;
  width: 100%;
  height: 40px;
  line-height: 40px;
  // border-bottom: 1px solid rgba(7, 17, 27, 0.1)
  @include border-1px(rgba(7, 17, 27, 0.1));

  .tab-item {
    flex: 1;
    text-align: center;
    & > a {
      display: block;
      font-size: 14px;
      color: rgb(77, 85, 93);
      &.active {
        color: rgb(240, 20, 20);
      }
    }
  }
}
</style>